import { useRoutes, Navigate } from "react-router-dom";
import { lazy, Suspense } from "react";
import { DashboardOutlined, VideoCameraOutlined } from "@ant-design/icons";
import Loading from "@/components/Loading";
import Layout from "../layouts";
const Login = lazy(() => import("@/pages/Login"));
const NotFound = lazy(() => import("@/pages/404"));
const Dashboard = lazy(() => import("@/pages/Dashboard")); // 首页仪表盘
const EquipmentManage = lazy(() => import("@/pages/EquipmentManage")); // 设备管理
// 路由加载
const load = (View) => {
  return (
    <Suspense fallback={<Loading />}>
      <View />
    </Suspense>
  );
};
// 路由表
const routesConfig = [
  {
    path: "/",
    element: load(Login),
  },
  // ---------- 主要路由部分 -----------
  {
    path: "/syt",
    element: <Layout />,
    children: [
      {
        path: "/syt/dashboard",
        element: load(Dashboard),
        meta: {
          icon: <DashboardOutlined />,
          title: "首页",
        },
      },
      {
        path: "/syt/equipmentManage",
        element: load(EquipmentManage),
        meta: {
          icon: <VideoCameraOutlined />,
          title: "设备管理",
        },
      },
    ],
  },
  // --------- 华丽分割线 --------------
  {
    path: "/404",
    element: load(NotFound),
  },

  {
    path: "*", // 任意路径
    element: <Navigate to="/404" />,
  },
];

// 找到要渲染成左侧菜单的路由
export const findSideBarRoutes = () => {
  const currentIndex = routesConfig.findIndex((route) => route.path === "/syt");
  return routesConfig[currentIndex].children;
};

export default function GetRouter() {
  return useRoutes(routesConfig);
}
